<template>
  <div class="dashboard">
    <el-row :gutter="20" class="stats-cards">
      <!-- 用户统计 -->
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #409eff">
              <el-icon size="32"><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.userStats?.totalUsers || 0 }}</div>
              <div class="stat-label">总用户数</div>
              <div class="stat-detail">
                <span>顾客：{{ stats.userStats?.customerCount || 0 }}</span>
                <span>商家：{{ stats.userStats?.merchantCount || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 商家统计 -->
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #67c23a">
              <el-icon size="32"><Shop /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.merchantStats?.totalMerchants || 0 }}</div>
              <div class="stat-label">总商家数</div>
              <div class="stat-detail">
                <span>营业中：{{ stats.merchantStats?.activeMerchants || 0 }}</span>
                <span>休息中：{{ stats.merchantStats?.closedMerchants || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 订单统计 -->
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #e6a23c">
              <el-icon size="32"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.orderStats?.totalOrders || 0 }}</div>
              <div class="stat-label">总订单数</div>
              <div class="stat-detail">
                <span>今日：{{ stats.orderStats?.todayOrders || 0 }}</span>
                <span>本周：{{ stats.orderStats?.weekOrders || 0 }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 营收统计 -->
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #f56c6c">
              <el-icon size="32"><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">¥{{ stats.revenueStats?.totalRevenue || '0.00' }}</div>
              <div class="stat-label">总营收</div>
              <div class="stat-detail">
                <span>今日：¥{{ stats.revenueStats?.todayRevenue || '0.00' }}</span>
                <span>本周：¥{{ stats.revenueStats?.weekRevenue || '0.00' }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据 -->
    <el-row :gutter="20" class="mt-20">
      <!-- 用户详情 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>用户统计详情</span>
              <el-tag type="success" size="small">活跃用户：{{ stats.userStats?.activeUsers || 0 }}</el-tag>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="总用户数">
              {{ stats.userStats?.totalUsers || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="顾客数量">
              {{ stats.userStats?.customerCount || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="商家数量">
              {{ stats.userStats?.merchantCount || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="活跃用户">
              {{ stats.userStats?.activeUsers || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="今日新增">
              <el-tag type="success">+{{ stats.userStats?.todayNewUsers || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="本周新增">
              <el-tag type="primary">+{{ stats.userStats?.weekNewUsers || 0 }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 商家详情 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>商家统计详情</span>
              <el-tag type="success" size="small">在线商品：{{ stats.merchantStats?.activeFoods || 0 }}</el-tag>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="总商家数">
              {{ stats.merchantStats?.totalMerchants || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="营业中">
              <el-tag type="success">{{ stats.merchantStats?.activeMerchants || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="休息中">
              <el-tag type="info">{{ stats.merchantStats?.closedMerchants || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总商品数">
              {{ stats.merchantStats?.totalFoods || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="在线商品">
              <el-tag type="success">{{ stats.merchantStats?.activeFoods || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="下架商品">
              <el-tag type="info">{{ (stats.merchantStats?.totalFoods || 0) - (stats.merchantStats?.activeFoods || 0) }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单和营收详情 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span>订单统计详情</span>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="总订单数">
              {{ stats.orderStats?.totalOrders || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="待处理">
              <el-tag type="warning">{{ stats.orderStats?.pendingOrders || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="处理中">
              <el-tag type="primary">{{ stats.orderStats?.processingOrders || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="已完成">
              <el-tag type="success">{{ stats.orderStats?.completedOrders || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="已取消">
              <el-tag type="info">{{ stats.orderStats?.cancelledOrders || 0 }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="今日订单">
              <el-tag type="success">{{ stats.orderStats?.todayOrders || 0 }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span>营收统计详情</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="总营收">
              <span style="font-size: 18px; font-weight: bold; color: #f56c6c;">
                ¥{{ stats.revenueStats?.totalRevenue || '0.00' }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="今日营收">
              <el-tag type="success" size="large">¥{{ stats.revenueStats?.todayRevenue || '0.00' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="本周营收">
              <el-tag type="primary" size="large">¥{{ stats.revenueStats?.weekRevenue || '0.00' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="本月营收">
              <el-tag type="warning" size="large">¥{{ stats.revenueStats?.monthRevenue || '0.00' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="平均订单金额">
              ¥{{ stats.revenueStats?.avgOrderAmount || '0.00' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getOverviewStats } from '@/api/statistics'

const stats = ref({
  userStats: {},
  merchantStats: {},
  orderStats: {},
  revenueStats: {}
})

const loadStats = async () => {
  try {
    const res = await getOverviewStats()
    stats.value = res.data
  } catch (error) {
    console.error('加载统计数据失败：', error)
    ElMessage.error('加载统计数据失败')
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.dashboard {
  width: 100%;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-detail {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #606266;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
